<template>
  <div class="page-userRegistration">
    <div class="page-login--layer page-login--layer-area">
      <ul class="circles">
        <li v-for="n in 10" :key="n"></li>
      </ul>
    </div>
    <div
      class="page-login--layer page-login--layer-time"
      flex="main:center cross:center">
      {{time}}
    </div>
    <div class="page-login--layer">
      <div
        class="page-login--content"
        flex="dir:top main:justify cross:stretch box:justify">
        <div class="page-login--content-header">
          <p class="page-login--content-header-motto">
            <span style="font-size: 35px;"></span>
          </p>
        </div>
        <div
          class="page-login--content-main"
          flex="dir:top main:center cross:center">
          <h2 class="page-login--content-header-motto">商家入驻信息填写</h2>
          
          <div class="page-login--form">
            <el-card shadow="never">
              <el-form
                ref="loginForm"
                label-position="top"
                :rules="rules"
                :model="formLogin"
                size="default">
                <el-form-item prop="username">
                  <!-- 用户名 -->
                  <el-input
                    type="text"
                    v-model="formLogin.username"
                    placeholder="请输入用户名">
                    <i slot="prepend" class="fa fa-user-circle-o"></i>
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <!-- 密码 -->
                  <el-input
                    type="password"
                    v-model="formLogin.password"
                    placeholder="密码"
                    aria-required="true">
                    <i slot="prepend" class="fa fa-keyboard-o"></i>
                  </el-input>
                </el-form-item>
                  <el-form-item prop="repassword">
                  <!-- 验证密码 -->
                  <el-input
                    type="password"
                    v-model="formLogin.repassword"
                    placeholder="验证密码"
                    aria-required="true">
                    <i slot="prepend" class="fa fa-keyboard-o"></i>
                  </el-input>
                </el-form-item>
                <el-form-item prop="telephone">
                  <!-- 电话号码 -->
                  <el-input
                    type="text"
                    v-model="formLogin.telephone"
                    placeholder="电话号码"
                    aria-required="true">
                    <i slot="prepend" class="fa fa-phone"></i>
                  </el-input>
                </el-form-item>
                <el-form-item prop="idNumber">
                  <!-- 身份证 -->
                  <el-input
                    type="text"
                    v-model="formLogin.idNumber"
                    placeholder="身份证号码"
                    aria-required="true">
                    <i slot="prepend" class="fa fa-id-card-o"></i>
                  </el-input>
                </el-form-item>
                <el-form-item prop="email">

                  <!-- 邮箱 -->
                  <el-input
                    type="email"
                    v-model="formLogin.email"
                    placeholder="邮箱">
                     <i slot="prepend" class="fa fa-envelope-o"></i>
                  </el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <span @click="validateCode()" style="color:purple">点击此处获取验证码</span>  <span style="color:green" v-if="formLogin.code === formLogin.getCode && formLogin.code !==''" >验证成功</span>
                  <el-input
                    type="text"
                    v-model="formLogin.code"
                    placeholder="输入从邮箱获得的验证码">
                     <i slot="prepend" class="fa fa-paper-plane"></i>
                  </el-input>
                </el-form-item>
                <el-button
                  size="default"
                  @click="backToLogin()"
                  type="info"
                  class="button-return">
                  返回
                </el-button>
                <el-button
                  size="default"
                  @click="submit"
                  type="primary"
                  class="button-register">
                  注册
                </el-button>
              </el-form>
            </el-card>

          </div>
        </div>
        <div class="page-login--content-footer">
          <p class="page-login--content-footer-copyright">
            Copyright
            <d2-icon name="copyright"/>
            2021 D2 Projects gitee组织出品
            <a href="https://github.com/FairyEver">
              @FairyEver
            </a>
          </p>
          <p class="page-login--content-footer-options">
            <a href="#">帮助</a>
            <a href="#">隐私</a>
            <a href="#">条款</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


import dayjs from 'dayjs'
import { mapActions } from 'vuex'
import localeMixin from '@/locales/mixin.js'
import {validatePassword,isEmail,isTel} from "./validation"


export default {
  mixins: [
    localeMixin
  ],
  data () {
    const validateSurePassword = (rules, value, callback) => {
    if (value !== '') {
      if (value.length <= 0) {
        callback(new Error('请确认密码'))
        return false
      } else if (value !== this.formLogin.password) {
        callback(new Error('两次输入的新密码不一致'))
        return false
      } else {
        callback()
      }
    }
  }

  const validateCode = (rules, value, callback) => {
    const mail = this.formLogin.email
          
    if(this.formLogin.email === ""){
      callback(new Error('请先输入邮箱'))
    }
    else if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(mail)){
      callback(new Error('请输入正确的邮箱'))
    }

    if(value ===null || value ==="")
    callback(new Error('请输入验证码'))

      if (value !== this.formLogin.getCode) {
      callback(new Error('验证码错误'))
      return false
    } else {
      callback()
    }
    
  }

    return {
      captchaURL: '/captcha?time=' + new Date(),
      timeInterval: null,
      time: dayjs().format('HH:mm:ss'),
      dialogVisible: false,
      // 表单
      // formLogin: {
      //   username: '',
      //   password: '',
      //   repassword: '',
      //   role: '商家',
      //   telephone: '',
      //   idNumber: '',
      //   email: '',
      //   code: '',
      //   getCode:''
      // },
      formLogin: {
        username: '1',
        password: 'a1234567',
        repassword: 'a1234567',
        role: '商家',
        telephone: '18859152089',
        idNumber: '350322199904094317',
        email: 'zzw49@qq.com',
        code: '',
        getCode:''
      },

      // 表单校验
      rules: {
        username: [ 
          { required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          { required: true, message: '请输入密码',trigger: 'blur'},
          { validator: validatePassword, trigger: 'blur' }
        ],
        repassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: validateSurePassword, trigger: 'blur' }
        ], 
        email: [
          { required: true, message: '请输入邮箱以验证', trigger: 'blur' },
          { validator: isEmail, trigger: 'blur' }
        ],
        code: [
          { validator: validateCode, trigger: 'blur' }
        ],
        telephone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { validator: isTel, trigger: 'blur' }
        ],
        idNumber: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
          {
            pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
            message: '请输入正确的证件号', trigger: 'blur'
          }
        ]
      }
    }
  },
  
  mounted () {
    this.timeInterval = setInterval(
      () => {  this.refreshTime()  }, 1000)
    },

  beforeDestroy () {
    clearInterval(this.timeInterval)
  },

  methods: {
    /**
     * @description 验证邮箱
     */
    validateCode () {
    // this.$refs.loginForm.validate((valid) => {
      if (this.formLogin.email === null || this.formLogin.email === "")
        this.$message.error({
                message: '请输入邮箱',
                });
         if (this.formLogin.email !== "") {
          this.$axios({
            url: '/validateMail',
            method: 'post',
            params: { 
              email: this.formLogin.email
            }
          }).then(response => {
           
             this.$notify.success({
                title: '发送成功',
                message: '成功发送邮件，请等待验证',
                duration: 8000
                });
            this.formLogin.getCode = response.data.obj
            console.log(response.data.obj)
          }).catch(e => {
            this.$notify.error({
              title: '发送失败',
              message: "未知错误",
              duration: 8000
            });
          })
        } else {
          // 登录表单校验失败
          this.$message.error('请先完整填写其他信息再发送验证')
        }
    // })
    },

    /**
     * @description 刷新页面时间
     */
    refreshTime () {
      this.time = dayjs().format('HH:mm:ss')
    },

    /**
     * 返回按钮
     */
    backToLogin () {
      this.$router.push('/login')
    },

    /**
     * @description 提交表单
     * 提交注册信息 this.$router.replace(this.$route.query.redirect || '/')
     */
    submit () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {

      
          this.$axios({
            url: '/register',
            method: 'post',
            data: { 
              username: this.formLogin.username, 
              password: this.formLogin.password, 
              accountRole: this.formLogin.role,
              telephone :this.formLogin.telephone,
              idNumber :this.formLogin.idNumber,
              email: this.formLogin.email
            }
          }).then(response => {
            this.formLogin.getCode = ""
            this.formLogin.code = ""
            this.$message.success(response.data.msg)
            this.$router.push("/")
          }).catch(e => {
            this.$notify.error(e)
            
          })
        } else {
          // 登录表单校验失败
          this.$message.error('输入有误，请检查无误后再注册')
        }
      })   
    }
  }
}


</script>

<style lang="scss">
.page-userRegistration {
  @extend %unable-select;
  $backgroundColor: #F0F2F5;
  background-color: $backgroundColor;
  height: 100%;
  position: relative;
  // 层
  .page-login--layer {
    @extend %full;
    overflow: auto;
  }
  .page-login--layer-area {
    overflow: hidden;
  }
  // 时间
  .page-login--layer-time {
    font-size: 24em;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.03);
    overflow: hidden;
  }
  // 登陆页面控件的容器
  .page-login--content {
    height: 100%;
    min-height: 500px;
  }
  // header
  .page-login--content-header {
    padding: 1em 0;
    .page-login--content-header-motto {
      margin: 0px;
      padding: 0px;
      color: $color-text-normal;
      text-align: center;
      font-size: 12px;
    }
  }
  // main
  .page-login--logo {
    width: 440px;
    margin-bottom: 2em;
    margin-top: -2em;
  }
  // 登录表单
  .page-login--form {
    width: 580px;
    // 卡片
    .el-card {
      margin-bottom: 25px;
    }
    // 返回按钮
    .button-return {
      margin-left: 5%;
      width: 30%;
    }

    // 注册按钮
    .button-register {
      margin-left: 25%;
      width: 30%;
    }


    // 输入框左边的图表区域缩窄
    .el-input-group__prepend {
      padding: 0px 14px;
    }
    .login-code {
      height: 40px - 2px;
      display: block;
      margin: 0px -20px;
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px;
    }
    // 登陆选项
    .page-login--options {
      margin: 0px;
      margin-left: 20px;
      padding: 0px;
      font-size: 14px;
      color: $color-primary;
      margin-bottom: 5px;
      font-weight: bold;
    }
  }
  // footer
  .page-login--content-footer {
    padding: 1em 0;
    .page-login--content-footer-locales {
      padding: 0px;
      margin: 0px;
      margin-bottom: 15px;
      font-size: 12px;
      line-height: 12px;
      text-align: center;
      color: $color-text-normal;
      a {
        color: $color-text-normal;
        margin: 0 .5em;
        &:hover {
          color: $color-text-main;
        }
      }
    }
    .page-login--content-footer-copyright {
      padding: 0px;
      margin: 0px;
      margin-bottom: 10px;
      font-size: 12px;
      line-height: 12px;
      text-align: center;
      color: $color-text-normal;
      a {
        color: $color-text-normal;
      }
    }
    .page-login--content-footer-options {
      padding: 0px;
      margin: 0px;
      font-size: 12px;
      line-height: 12px;
      text-align: center;
      a {
        color: $color-text-normal;
        margin: 0 1em;
      }
    }
  }
  // 背景
  .circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    li {
      position: absolute;
      display: block;
      list-style: none;
      width: 20px;
      height: 20px;
      background: #FFF;
      animation: animate 25s linear infinite;
      bottom: -200px;
      @keyframes animate {
        0%{
          transform: translateY(0) rotate(0deg);
          opacity: 1;
          border-radius: 0;
        }
        100%{
          transform: translateY(-1000px) rotate(720deg);
          opacity: 0;
          border-radius: 50%;
        }
      }
      &:nth-child(1) {
        left: 15%;
        width: 80px;
        height: 80px;
        animation-delay: 0s;
      }
      &:nth-child(2) {
        left: 5%;
        width: 20px;
        height: 20px;
        animation-delay: 2s;
        animation-duration: 12s;
      }
      &:nth-child(3) {
        left: 70%;
        width: 20px;
        height: 20px;
        animation-delay: 4s;
      }
      &:nth-child(4) {
        left: 40%;
        width: 60px;
        height: 60px;
        animation-delay: 0s;
        animation-duration: 18s;
      }
      &:nth-child(5) {
        left: 65%;
        width: 20px;
        height: 20px;
        animation-delay: 0s;
      }
      &:nth-child(6) {
        left: 75%;
        width: 150px;
        height: 150px;
        animation-delay: 3s;
      }
      &:nth-child(7) {
        left: 35%;
        width: 200px;
        height: 200px;
        animation-delay: 7s;
      }
      &:nth-child(8) {
        left: 50%;
        width: 25px;
        height: 25px;
        animation-delay: 15s;
        animation-duration: 45s;
      }
      &:nth-child(9) {
        left: 20%;
        width: 15px;
        height: 15px;
        animation-delay: 2s;
        animation-duration: 35s;
      }
      &:nth-child(10) {
        left: 85%;
        width: 150px;
        height: 150px;
        animation-delay: 0s;
        animation-duration: 11s;
      }
    }
  }
}
</style>
